<template>
    <div class="mainc">
      <div class="touxc">
        <div class="toux">
            <van-image
                round
                width="5rem"
                height="5rem"
                :src="touxiang"
                />
        </div>
        <div class="info">
            <div>{{ name }}</div>
            <div>{{ hidemobileNum }}</div>
        </div>
    </div>
    <div class="serachc">
      <van-search
        v-model="yuechedidian"
        shape="round"
        background="rgb(4, 174, 211)"
        placeholder="收索地点约车"
        @search="toresult"
      />
    </div>
    <div class="syuan">
      <div @click="toUseCar">
        <div class="yuan">
          <van-image round width="2rem" height="2rem" :src="yongche" />
        </div>
        <div>用车</div>
      </div>
      <div @click="toZaike">
        <div class="yuan">
          <van-image round width="2rem" height="2rem" :src="chuxing" />
        </div>
        <div>载客</div>
      </div>
      <div @click="toxinghen">
        <div class="yuan">
          <van-image round width="2rem" height="2rem" :src="xingcheng" />
        </div>
        <div >行程</div>
      </div>
    </div>
    <div class="fa">
      <div class="fjcl">附近车辆</div>
      <div @click="toresult" class="all">全部</div>
    </div>
    <div class="cllist">
      <Card :data="sharedData"  />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref , onMounted,reactive,computed} from 'vue';
import aa from '../../../assets/Vector.png'
import yongche from '../../../assets/用车.png'
import chuxing from '../../../assets/居民出行.png'
import xingcheng from '../../../assets/行程.png'
import touxiang from '../../../assets/头像.png'
import celiang from '../../../assets/celiang.png'
import { useRoute, useRouter } from "vue-router";
import Card from "@/components/Card.vue";
const router = useRouter();
const route = useRoute();
let yuechedidian = ref("")
const sharedData = reactive({
      resultList: [
        {
          loginName: "张三",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "九峰",
          price: "",
        },
        {
          loginName: "李四",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷天地",
          price: "",
        },
        {
          loginName: "王五",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷大道",
          price: "",
        },
        {
          loginName: "小六",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "佛祖岭",
          price: "",
        },
        {
          loginName: "Jamse",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷天地",
          price: "",
        },
      ],
    });

    const hidemobileNum = computed(() => {
      let str = ''
      let list = (mobileNum.value+'').split('')
      for(let i = 0;i<list.length;i++) {
        if(i >2 && i <7) {
          str+='*'
        } else {
          str+=list[i]
        }
      }
      return str
    });
const  toZaike = () => {
  router.push('/zaike')
}
const toxinghen = () => {
  router.push('/xinchen')
}

const toUseCar = () => {
  router.push("/useCar");
};
const toresult = () => {
  router.push("/result");
};

const name = ref('')
const mobileNum = ref('')

onMounted(() => {
  let userInfo:any = JSON.parse(localStorage.getItem('userInfo') || '')
  name.value = userInfo?.loginName
  mobileNum.value= userInfo?.mobileNum
}) 

</script>

<style lang="less" scoped>
.touxc {
  display: flex;
  padding: 16px;
  background: rgb(4, 174, 211);
}
.info {
  color: rgb(3, 39, 48);
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 16px;
}
.serachc {
  background: rgb(4, 174, 211);
  border-radius: 0 0 24px 24px;
  padding-bottom: 16px;
}
.syuan {
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  text-align: center;
}
.yuan {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgb(231, 249, 253);
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}
.fjcl {
  color: rgb(43, 43, 43);
  font-size: 18px;
  font-weight: 600;
}
.all {
  color: rgb(75, 97, 221);
}
.mainc {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}
.cllist {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: scroll;
  padding: 0 16px;
}
.cllistitem {
  width: 50vw;
  display: flex;
  justify-content: center;
}
</style>
